<style scoped>
.formitem{
    padding: 0 30px;
}
.wraper {
    
}
.result {
    text-align: center;
    font-size:20px;
    padding-bottom:100px;
}
.fee-con {
    padding: 0 30px;
}

.fee-card {
    margin-bottom: 10px;
}

.fee-card-head {
    background-color: #e4eaec;
    line-height: 38px;
    border: 1px solid #ddd;
}
.fee-card-head h3{
    text-align: center;
    font-size: 16px;
}
.fee-card-title {
    font-size: 14px;
    color: #333;
    font-weight: bold;
    padding-left: 20px;
}

.fee-card-headr {
    padding-right: 10px;
    text-align: right;
}

.fee-card-content {
    clear: both;
}

.fee-paramname {
    text-align: center;
    background-color: #e4eaec;
    font-size: 14px;
    color: #333;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    overflow: hidden;
    white-space:nowrap;
    height: 40px;
}

.fee-paramvalue {
    padding-left: 30px;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    overflow: hidden;
    white-space:nowrap;
    height: 40px;
}

.fee-card-contentrow {
    line-height: 40px;
    border-left: 1px solid #ddd;
    /* border-bottom: 1px solid #ddd; */
}
.feestyle{
    color: red;
}
.ivu-table td.feestyle{
         color: red;
}
</style>

<template>
    <div class="test-page">
        <product-title></product-title>
        <div class="wraper">
            
            <div class="fee-con">
                <div class="card fee-card">
                    <Row class="fee-card-head">
                        <Col span="24">
                            <h3>{{userinfo.com}}  佣金发放明细表</h3>
                        </Col>
                    </Row>
                    <div class="fee-card-content">
                        <Row class="fee-card-contentrow">
                            <Col span="2" class="fee-paramname">年度</Col>
                            <Col span="4" class="fee-paramvalue">{{year}}</Col>
                            <Col span="2" class="fee-paramname">月份</Col>
                            <Col span="4" class="fee-paramvalue">{{month}}</Col>
                            <Col span="2" class="fee-paramname">姓名</Col>
                            <Col span="4" class="fee-paramvalue">{{userinfo.name}}</Col>
                            <Col span="2" class="fee-paramname">身份证号</Col>
                            <Col span="4" class="fee-paramvalue">{{userinfo.id_number}}</Col>                        
                        
                            <Col span="2" class="fee-paramname">销售代码</Col>
                            <Col span="4" class="fee-paramvalue">{{userinfo.job_num}}</Col>
                            <Col span="2" class="fee-paramname">所在公司</Col>
                            <Col span="4" class="fee-paramvalue">{{userinfo.com}}</Col>
                            <Col span="2" class="fee-paramname">营业部</Col>
                            <Col span="4" class="fee-paramvalue">{{userinfo.org}}</Col>
                            <Col span="2" class="fee-paramname">级别</Col>
                            <Col span="4" class="fee-paramvalue">{{userinfo.rank}}</Col>                        
                        
                            <Col span="2" class="fee-paramname">现职状况</Col>
                            <Col span="4" class="fee-paramvalue">在职</Col>
                            <Col span="2" class="fee-paramname">税后佣金</Col>
                            <Col span="4" class="fee-paramvalue feestyle">{{afer_tax_commission}}</Col>
                            <Col span="2" class="fee-paramname">实发金额</Col>
                            <Col span="4" class="fee-paramvalue feestyle">{{final_pay_amount}}</Col>
                            <Col span="2" class="fee-paramname">缴纳增值税基数</Col>
                            <Col span="4" class="fee-paramvalue">{{vat_base}}</Col>
                            <Col span="2" class="fee-paramname">增值税</Col>
                            <Col span="4" class="fee-paramvalue">{{vat}}</Col>                        
                        
                            <Col span="2" class="fee-paramname">建税</Col>
                            <Col span="4" class="fee-paramvalue">{{construction_tax}}</Col>
                            <Col span="2" class="fee-paramname">教育费附加</Col>
                            <Col span="4" class="fee-paramvalue">{{education_tax}}</Col>
                            
                            <Col span="2" class="fee-paramname">地方教育费附加</Col>
                            <Col span="4" class="fee-paramvalue">{{local_education_tax}}</Col>                        
                        
                            <Col span="2" class="fee-paramname">增值税等合计</Col>
                            <Col span="4" class="fee-paramvalue">{{vat_total}}</Col>
                            <Col span="2" class="fee-paramname">个税基数</Col>
                            <Col span="4" class="fee-paramvalue">{{id_tax_base}}</Col>
                            <Col span="2" class="fee-paramname">应税所得</Col>
                            <Col span="4" class="fee-paramvalue">{{ taxable_income  }}</Col>
                            <Col span="2" class="fee-paramname">应交个人所得税</Col>
                            <Col span="4" class="fee-paramvalue">{{tax_payable}}</Col>                        
                        </Row>
                    </div>
                </div>
                <div class="card fee-card">
                    <Row class="fee-card-head">
                        <Col span="24">
                            <h3>佣金明细</h3>
                        </Col>
                    </Row>
                    <div class="fee-card-content">
                        <Row class="fee-card-contentrow">
                            <!-- <Col span="2" class="fee-paramname">首佣</Col>
                            <Col span="4" class="fee-paramvalue">{{formItem.first_commission}}</Col>
                            <Col span="2" class="fee-paramname">续佣</Col>
                            <Col span="4" class="fee-paramvalue">{{formItem.continue_commission}}</Col>
                            <Col span="2" class="fee-paramname">推荐奖金</Col>
                            <Col span="4" class="fee-paramvalue">{{formItem.referral_bonus}}</Col>
                            <Col span="2" class="fee-paramname">应税激励方案兑现</Col>
                            <Col span="4" class="fee-paramvalue">{{formItem.taxable_fulfilled}}</Col>                        
                        
                            <Col span="2" class="fee-paramname">综合开拓佣金</Col>
                            <Col span="4" class="fee-paramvalue">{{formItem.dev_commission}}</Col>
                            <Col span="2" class="fee-paramname">首佣缓发</Col>
                            <Col span="4" class="fee-paramvalue">{{formItem.first_commission_delay}}</Col>
                            <Col span="2" class="fee-paramname">续佣缓发</Col>
                            <Col span="4" class="fee-paramvalue">{{formItem.continue_commission_delay}}</Col>
                            <Col span="2" class="fee-paramname">管理津贴</Col>
                            <Col span="4" class="fee-paramvalue">{{formItem.management_allowance}}</Col>                        
                        
                            <Col span="2" class="fee-paramname">续收督导津贴奖金</Col>
                            <Col span="4" class="fee-paramvalue">{{formItem.allowance_bonus}}</Col>
                            <Col span="2" class="fee-paramname">寿佣合计</Col>
                            <Col span="4" class="fee-paramvalue">{{life_commission_total/100}}</Col>
                            <Col span="2" class="fee-paramname">佣金合计</Col>
                            <Col span="4" class="fee-paramvalue">{{commission_total/100}}</Col> 
                                                                          -->
                            <div v-for="item in commission_detail" :key="item.name">
                                <Col span="2" class="fee-paramname">{{item.name}}</Col>
                                <Col span="4" class="fee-paramvalue">{{item.value}}</Col>
                            </div>                                              
                            
                        </Row>
                        
                    </div>
                </div>
                <div class="card fee-card">
                    <Row class="fee-card-head">
                        <Col span="24">
                            <h3>加扣税明细</h3>
                        </Col>
                    </Row>
                    <div class="fee-card-content">
                        <Row class="fee-card-contentrow">
                            <Col span="2" class="fee-paramname">税后已发</Col>
                            <Col span="4" class="fee-paramvalue">{{formItem.afer_tax_issued}}（实物激励方案已兑现）</Col>
                            <Col span="2" class="fee-paramname">税后扣除</Col>
                            <Col span="4" class="fee-paramvalue">{{formItem.afer_tax_deduct}}</Col>
                            <Col span="2" class="fee-paramname">申请补发</Col>
                            <Col span="4" class="fee-paramvalue">{{formItem.apply_reissue}}</Col>
                            <Col span="2" class="fee-paramname">保证金退款</Col>
                            <Col span="4" class="fee-paramvalue">{{formItem.deposit_refund}}</Col>                        
                        
                            <Col span="2" class="fee-paramname">需缓发</Col>
                            <Col span="4" class="fee-paramvalue">{{formItem.need_delay}}</Col>                                              
                        </Row>
                        
                        
                    </div>
                </div>
                <!-- <div class="card fee-card">
                    <Row class="fee-card-head">
                        <Col span="24">
                            <h3>产品销售明细</h3>
                        </Col>
                    </Row>
                    <div class="fee-card-content">
                        <Table :columns="columns1" :data="data1"></Table>                                           
                    </div>
                </div> -->
            </div>


            <!-- <div class="result">
                    实发金额:<span style="color:red">{{final_pay_amount}}</span>
            </div> -->
        </div>
    </div>
</template>

<script>
import productTitle from '../../components/productTitle'
import { getPerformanceFee } from '../../api/achievement'
import { getSalaryDetail } from '../../api/settlement'
export default {
    data() {
        return {
            commission_detail:[],
            formItem:{
                first_commission:0,    //首佣
                first_commission_delay:0,   //首佣缓发
                continue_commission:0,    //续佣
                continue_commission_delay:0,   //续佣缓发：
                referral_bonus:0,  //推荐奖金：
                management_allowance:0,   //管理津贴：
                taxable_fulfilled:0,  //应税激励方案兑现：
                allowance_bonus:0,   //续收督导津贴奖金：
                dev_commission:0,   //综合开拓佣金：
                afer_tax_issued:0,  //税后已发（实物激励方案已兑现）
                afer_tax_deduct:0,  //税后扣除
                apply_reissue:0,  //申请补发
                deposit_refund:0,    //保证金退款
                need_delay:0    //需缓发
            },
            userinfo:{},
            uid:'',
            afer_tax_commission:0,
            final_pay_amount:0,
            vat_base:0,
            vat:0,
            construction_tax:0,
            education_tax:0,
            local_education_tax:0,
            vat_total:0,
            id_tax_base:0,
            taxable_income:0,
            tax_payable:0,
        };
    },
    components: {
        productTitle
    },
    computed: {
        //寿佣合计
        // life_commission_total:function(){
        //     return parseFloat(this.formItem.first_commission)*100 
        //         + parseFloat(this.formItem.first_commission_delay)*100
        //         + parseFloat(this.formItem.continue_commission)*100
        //         + parseFloat(this.formItem.continue_commission_delay)*100
        //         + parseFloat(this.formItem.referral_bonus)*100
        //         + parseFloat(this.formItem.management_allowance)*100
        //         + parseFloat(this.formItem.taxable_fulfilled)*100
        //         + parseFloat(this.formItem.allowance_bonus)*100
        // },
        // //佣金合计
        // commission_total:function(){
        //     return this.life_commission_total + parseFloat(this.formItem.dev_commission)*100
        // },
        // //缴纳增值税基数
        // vat_base:function(){
        //     if(this.commission_total>30900*100){
        //         return this.commission_total
        //     } else {
        //         return 0;
        //     }
        // },
        // //增值税  
        // vat:function(){
        //     return parseInt((this.vat_base/1.03*0.03).toFixed(0))
        // },
        // //城建税  
        // construction_tax:function(){
        //     return parseInt(this.vat*0.07)
        // },
        // //教育税  
        // education_tax:function(){
        //     return parseInt(this.vat*0.03)
        // },
        // //地方教育费附加  
        // local_education_tax:function(){
        //     return parseInt(this.vat*0.02)
        // },
        // //增值税等合计
        // vat_total:function(){
        //     return this.vat + this.construction_tax + this.education_tax + this.local_education_tax
        // },
        // //个税基数
        // id_tax_base:function(){
        //      return ((this.commission_total/1.03-this.construction_tax-this.education_tax-this.local_education_tax)*0.6).toFixed(1)
            
        // },
        
        // //应税所得
        // taxable_income:function(){
        //     if(this.id_tax_base >= 4000*100){
        //         return parseInt((this.id_tax_base*0.8).toFixed(0));
        //     } else {
        //         return parseInt(this.id_tax_base - 800*100);
        //     }
        // },
        // //应交个人所得税
        // tax_payable:function(){
        //     if(this.taxable_income >= 50000*100){
        //         return parseInt(((this.taxable_income-50000*100) * 0.4 + 30000*100 * 0.3 + 20000*100 * 0.2 ).toFixed(0))
        //     } else if (this.taxable_income >= 20000*100 ){
        //         return parseInt(((this.taxable_income-20000*100)* 0.3 + 20000*100 * 0.2).toFixed(0))
        //     }  else if (this.taxable_income > 0){
        //         return parseInt((this.taxable_income*0.2).toFixed(0))
        //     } else {
        //         return 0;
        //     }
        // },
        // //税后佣金
        // afer_tax_commission:function(){
        //     return this.commission_total - this.vat_total - this.tax_payable
        // },
        
        // //实发金额
        // final_pay_amount:function(){
        //     return this.afer_tax_commission
        //         + parseFloat(this.formItem.apply_reissue)*100
        //         + parseFloat(this.formItem.deposit_refund)*100
        //         - parseFloat(this.formItem.need_delay)*100
        //         - parseFloat(this.formItem.afer_tax_deduct)*100
        //         - parseFloat(this.formItem.afer_tax_issued)*100
        // },
        
    },
    created() {
        
        var _date = this.$route.params.id
        var _datearry = _date.split(",")
        this.userinfo.name = _datearry[0]
        this.year = _datearry[1]
        this.month = _datearry[2]
        this.uid =  _datearry[3]
        this.getPerformance()
    },
    methods: {
       getPerformance() {
           var _date = this.year+'-'+this.month
           var _params={
               year:this.year,
               month:this.month,
               uid:this.uid
           }
           console.log(_params)
           new Promise((resolve, reject) => {
                getSalaryDetail(_params).then(response => {
                    console.log(response.data)
                    if (response.data.err == 0) {
                        //this.formItem.first_commission = response.data.data.fee
                        //this.userinfo = response.data.data.user_info
                        this.commission_detail = response.data.data.commission_detail
                        this.userinfo.id_number = response.data.data.id_number
                        this.userinfo.job_num = response.data.data.job_num
                        this.userinfo.com = response.data.data.com
                        this.userinfo.org = response.data.data.org
                        this.userinfo.rank = response.data.data.rank_name
                        this.afer_tax_commission = response.data.data.afer_tax_commission
                        this.final_pay_amount = response.data.data.final_pay_amount
                        this.vat_base = response.data.data.vat_base
                        this.vat = response.data.data.vat
                        this.construction_tax = response.data.data.construction_tax
                        this.education_tax = response.data.data.education_tax
                        this.local_education_tax = response.data.data.local_education_tax
                        this.vat_total = response.data.data.vat_total
                        this.id_tax_base = response.data.data.id_tax_base
                        this.taxable_income = response.data.data.taxable_income
                        this.tax_payable = response.data.data.tax_payable
                    } else {
                        this.$Message.error(response.data.info);
                    }
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
       }

    }

};
</script>
